<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理员登录</title>
    <link rel="stylesheet" href="./res/layui/css/layui.css">
    <style>
        *{            border-radius: 0 !important;        }
        body {
            background-image: url('/image/logo.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            opacity: 1;
            margin: 0;
            padding: 0;
            min-height: 100vh;
        }
        .login-box{
            margin-top: 150px;
        }
        .login-panel{
            padding:20px;
            background: #fff;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
            border-radius: 5px;
            width: 320px; /* 调整面板宽度使其更贴近输入框大小 */
            margin: 0 auto; /* 确保面板居中 */
        }
        .layui-form-item {
            background: #fff;
        }
        .layui-input {
            background: #fff !important;
            border: 1px solid #e6e6e6;
        }
        /* 确保导航栏文字清晰可见 */
        .layui-nav {
            background: #fff !important;
        }
        .layui-nav a {
            background: #fff !important;
            color: #333 !important;
        }
        /* 确保表格标题和内容文字清晰可见 */
        .layui-tab-title {
            background: #fff;
        }
        .layui-tab-title li {
            background: #fff;
            color: #333;
        }
        .layui-tab-content {
            background: #fff;
        }
        /* 确保标签文字清晰可见 */
        .layui-form-label {
            background: #fff !important;
            color: #333 !important;
        }
        /* 确保按钮文字清晰可见 */
        .layui-btn {
            background: #1e9fff !important;
            color: #fff !important;
        }
        /* 确保页脚版权信息清晰可见并位于输入框正下方，背景紧贴文字并添加圆角 */
         div[style*="text-align: center"] {
             background: #fff !important;
             padding: 5px 15px; /* 减少内边距，让背景紧贴文字 */
             color: #333;
             display: block; /* 修改为block确保正确定位 */
             text-align: center;
             margin: 15px auto 0; /* 添加顶部间距并水平居中 */
             width: 320px; /* 与登录面板宽度一致 */
             border-radius: 20px !important; /* 添加圆角效果 */
         }
    </style>
</head>
<body class="layui-bg-gray">
    <!--导航条-->
    <ul class="layui-nav layui-bg-gray">
        <li class="layui-nav-item">
            <a href="#" class="layui-logo">
                <img src="./res/images/logo.png" height="50px" alt="">
            </a>
        </li>
    </ul>

    <!--登录/注册框-->
    <div class="layui-container login-box">
        <div class="layui-row">
            <div class="login-panel">
                <div class="layui-tab layui-tab-brief">
                   <ul class="layui-tab-title">
                       <li class="layui-this">管理员登录</li>
                   </ul>
                    <div class="layui-tab-content">
                        <!--登录tab-->
                        <div class="layui-tab-item layui-show">
                            <form class="layui-form layui-form-pane">
                                <div class="layui-form-item">
                                    <label  class="layui-form-label">
                                        <i class="layui-icon layui-icon-username"></i>
                                    </label>
                                    <div class="layui-input-block">
                                        <input type="text" name="username" class="layui-input" placeholder="请输入账号" required lay-verify="required" lay-vertype="tips" lay-reqtext="请输入账号">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label  class="layui-form-label">
                                        <i class="layui-icon layui-icon-password"></i>
                                    </label>
                                    <div class="layui-input-block">
                                        <input type="password" name="password" class="layui-input" placeholder="请输入密码" required lay-verify="required" lay-vertype="tips" lay-reqtext="请输入密码" autocomplete="off">
                                    </div>
                                </div>
                                <div class="layui-form-item" style="margin-bottom: 0;">
                                     <button type="button" class="layui-btn layui-btn-normal layui-btn-fluid"  lay-submit lay-filter="formLogin">登录</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="text-align: center;margin-top: 10px;">&copy;软帝集团&湖北工程学院新技术学院</div>
    </div>

    <script src="./res/layui/layui.js"></script>
    <script>
        layui.use(function(){
            var ele = layui.element;
            var form = layui.form;
            //加载jquery组件（JS库）
            var $ = layui.jquery;
            //为表单绑定提交事件
            form.on('submit(formLogin)',function(data){
                $.get('/admin/login',data.field,function(resp){
                    if(resp.code === 500){
                        //弹出警告框，其中icon表示弹窗的小图标，取值范围0~6之间
                        layer.alert(resp.msg,{icon:2})
                    }else{
                        layer.msg(resp.msg,function(){
                            location.href='main.html'
                        })
                    }
                })
                //阻止表单跳转
                return false;
            })

        })
    </script>
</body>
</html>